/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
import BreadCrumbCom from '@/components/BreadCrumbCom';
import { containerRouterPrefix, ResponseCode } from '@/common/constants';
import { useHistory, Link, useLocation } from 'inula-router';
import { useCallback, useEffect, useState } from 'openinula';
import { Button, Dropdown, Tabs, message } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import useLocalStorage from '@/hooks/useLocalStorage';
import '@/styles/rayServiceDetail.less';
import Detail from '@/pages/cluster/detailComponent/Detail';
import Yaml from '@/pages/cluster/detailComponent/Yaml';
import Log from '@/pages/cluster/detailComponent/Log';
import Monitor from '@/pages/cluster/detailComponent/Monitor';
import { deleteClusterList, stopClusterList, restartClusterList, getClusterDetail } from '@/api/rayApi.js';
import DeleteInfoModal from '@/components/DeleteInfoModal';
export default function RayClusterDetail() {
  const location = useLocation();
  const history = useHistory();
  const [messageApi, contextHolder] = message.useMessage();
  const [currentTheme, setCurrentTheme] = useLocalStorage('theme', 'light');
  const [isShowClusterDetailOperation, setIsShowClusterDetailOperation] = useState(false);
  const clusterName = location.state.name;
  const clusterNameSpace = location.state.namespace;
  const [clusterStatus, setClusterStatus] = useState('');
  const [clusterDetailDelModalOpen, setClusterDetailDelModalOpen] = useState(false);
  const [isClusterDetailDelCheck, setIsClusterDetailDelCheck] = useState(false); // 是否选中

  const items = [
    {
      key: '1',
      label: <Button type="link" disabled={clusterStatus !== '失败' && clusterStatus !== '未运行'} onClick={() => handleRestartClusterDetail()}>启动</Button>,
    },
    {
      key: '2',
      label: <Button type="link" disabled={clusterStatus === '未运行'} onClick={() => handleStopClusterDetail()}>终止</Button>,
    },
    {
      key: '3',
      label: <Button type="link" disabled={clusterStatus === '运行中'} onClick={() => handleDeleteClusterDetail()}>删除</Button>,
    },
  ];
  const clusterDetailTabItems = [
    {
      key: '1',
      label: '详情',
      children: <Detail className='defaultRayClusterDetail' />,
    },
    {
      key: '2',
      label: 'YAML',
      children: <Yaml className='defaultRayClusterDetail' />,
    },
    {
      key: '3',
      label: '日志',
      children: <Log className='defaultRayClusterDetail' />,
    },
    {
      key: '4',
      label: '集群健康信息',
      children: <Monitor clusterName={clusterName} />,
    },
  ];
  const handleClusterDetailOperation = (open) => {
    // 展示创建下拉菜单
    setIsShowClusterDetailOperation(open);
  };
  const handleRestartClusterDetail = async () => {
    try {
      const res = await restartClusterList(clusterNameSpace, clusterName);
      if (res.data.code === ResponseCode.OK) {
        messageApi.success(`${clusterName}启动成功，如果资源状态仍未变化，请稍后手动刷新！`);
        getClusterStatus();
      } else {
        let msg = '';
        msg = res.data.data ? `${res.data.msg}: ${res.data.data}` : res.data.msg;
        messageApi.error(`${clusterName}启动失败,${msg}`);
      }
    } catch (error) {
      if (error) {
        let msg = '';
        msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
        messageApi.error(`${clusterName}启动失败,${msg}`);
      }
    }
  };
  const handleStopClusterDetail = async () => {
    try {
      const res = await stopClusterList(clusterNameSpace, clusterName);
      if (res.data.code === ResponseCode.OK) {
        messageApi.success(`${clusterName}终止成功，如果资源状态仍未变化，请稍后手动刷新！`);
        getClusterStatus();
      } else {
        let msg = '';
        msg = res.data.data ? `${res.data.msg}: ${res.data.data}` : res.data.msg;
        messageApi.error(`${clusterName}终止失败,${msg}`);
      }
    } catch (error) {
      if (error) {
        let msg = '';
        msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
        messageApi.error(`${clusterName}终止失败,${msg}`);
      }
    }
  };

  // 打开删除弹窗
  const handleDeleteClusterDetail = () => {
    setClusterDetailDelModalOpen(true);
  };
  // 取消删除
  const handleDelClusterDetailCancel = () => {
    setClusterDetailDelModalOpen(false);
    setIsClusterDetailDelCheck(false);
  }
  // 确认删除按钮删除
  const handleClusterDetailCheckFn = (e) => {
    setIsClusterDetailDelCheck(e.target.checked);
  };
  const deleteClusterDetail = async () => {
    try {
      const res = await deleteClusterList(clusterNameSpace, clusterName);
      if (res.data.code === ResponseCode.OK) {
        messageApi.success(`${clusterName}删除成功，如果资源状态仍未变化，请稍后手动刷新！`);
        setTimeout(() => {
          history.push('/RayCluster');
          setClusterDetailDelModalOpen(false);
        }, 500);
        setIsClusterDetailDelCheck(false);
      } else {
        let msg = '';
        msg = res.data.data ? `${res.data.msg}: ${res.data.data}` : res.data.msg;
        messageApi.error(`${clusterName}删除失败,${msg}`);
      }
    } catch (error) {
      if (error) {
        let msg = '';
        msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
        messageApi.error(`${clusterName}删除失败,${msg}`);
      }
    }
  };
  const getClusterStatus = async () => {
    const res = await getClusterDetail(clusterNameSpace, clusterName);
    try {
      if (res.data.code === ResponseCode.OK) {
        setClusterStatus(res.data.data.cluster_status_zhcn);
      } else {
        let msg = '';
        msg = res.data.data ? `${res.data.msg}: ${res.data.data}` : res.data.msg;
        messageApi.error(msg);
      }
    } catch (error) {
      if (error) {
        let msg = '';
        msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
        messageApi.error(`获取${clusterName}详情失败,${msg}`);
      }
    }
  };
  useEffect(() => {
    getClusterStatus();
  }, [])
  useEffect(() => {
  }, [currentTheme]);
  return <div className="child_content service_detail">
    <BreadCrumbCom className="create_bread" items={[
      { title: 'openFuyao Ray', disabled: true },
      { title: 'RayCluster', path: `/RayCluster` },
      { title: '详情', path: `/detail` },
    ]} />
    {contextHolder}
    <div>
      <div className="service_detail_top defaultRayClusterDetail">
        <div className="service_detail_top_title_btn">
          <p className='service_detail_top_title defaultRayClusterDetail'>{location.state.name}</p>
          <div>
            <Dropdown
              menu={{ items }}
              open={isShowClusterDetailOperation}
              className='defaultRayClusterDetail'
              onOpenChange={handleClusterDetailOperation}
              placement="bottom"
            >
              <Button className='primary_btn'>操作{isShowClusterDetailOperation ? <UpOutlined /> : <DownOutlined />} </Button>
            </Dropdown>
          </div>
        </div>
      </div>
      <Tabs defaultActiveKey="1" items={clusterDetailTabItems} />
    </div>
    <DeleteInfoModal
      title="删除RayCluster"
      open={clusterDetailDelModalOpen}
      cancelFn={handleDelClusterDetailCancel}
      content={[
        '删除RayCluster后将无法恢复，请谨慎操作。',
        `确定删除RayCluster下${clusterName} 吗？`,
      ]}
      showCheck={true}
      isCheck={isClusterDetailDelCheck}
      checkFn={handleClusterDetailCheckFn}
      confirmFn={deleteClusterDetail} />
  </div>;
}